<!--
    demo for iOS 写在前面
    Android 和 iOS 是否要分开？
        demo是为了更方便让你接入，由于苹果爸爸并未开发WebRTC在除了Safari以外浏览器的权限，
        因此Android与iOS的技术方案是有差异的，考虑到这一点，为了让在开发阶段更方便去理解以便
        实现自由业务，我们将iOS与Android分开，当你看完并完全理解这两者的差异，集成到同一个页面
        也是一种可选方案，愿佛祖保佑。:)

    阅读代码不是一件轻松的事，但也请花些时间看看注释，避免踩坑
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抓娃娃</title>
    <link href="dist/css/style.css?v=1" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <script src="../libs/vue.js"></script>
    <style>
        *{
            -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
            -moz-user-select: none;
        }
    </style>
    <script src="../libs/amfe-flexible.js"></script> <script>
    // demo 禁用 长按弹出菜单
    window.addEventListener('contextmenu', function(e){
        e.preventDefault();
    });
    </script>
</head>
<body ontouchmove="event.preventDefault()">
    <div id="app-main">

        <div id="content-box" style="display:none">
            <!-- 頂部導航 Start -->
        <!-- 测试代码：提供输入房间号进房间的窗口 ，请忽略 Start-->
        <div v-if="createRoomModal"  class="container modal">
            <div class="overlay" ></div>
            <div class="gvc-dialog" role="alertdialog" >
                <div class="gvc-dialog-hd">
                    <strong>进入房间</strong>
                </div>
                <div class="gvc-dialog-bd">
                    <div class="creating-wrap">
                        <span>房间ID</span>
                        <input type="text" class="gvc-input-text" placeholder="请输入房间ID" v-model="modalForm.roomnum" value="" autofocus="">
                    </div>
                </div>
                <div class="gvc-dialog-ft-btn-wrap">
                    <button class="gvc-btn confirm" v-on:click="createRoom">确定</button>
                </div>
            </div>
        </div>
        <!-- 测试代码：提供输入房间号进房间的窗口 ，请忽略 END -->


            <!-- 內容區塊 Start -->
            <div v-if="view == 1" class="container">
                <!-- 房間列表 Start -->
                <div class="rooms-wrap">
                    <!-- <p class="rooms-title">
                        <a href="javascript:;" v-on:click="showCreateRoom" class="connected create-room">+</a>
                        </p> -->
                    <ul class="rooms-list">
                        <li v-for="(item,i) in roomList" :class="roomnum == item.id ? 'room-item selected' : 'room-item' " :data-roomnum="item.id" v-on:click="chooseRoom(item)">
                            <p class="room-id">
                                <span class="label-txt">测试娃娃机 roomId: {{ item.id}}</span>
                               
                            </p>
                        </li>
                    </ul>

                    <div v-if="roomList && roomList.length > 0 " class="gvc-dialog-ft-btn-wrap">
                        <button class="gvc-btn confirm join-btn" v-on:click="joinRoom">进入房间</button>
                    </div>
                </div>
                <!-- 房間列表  End  -->
            </div>


            <!-- 內容區塊 Start -->
            <div v-if="view == 1 || view == 2" class="container rotate" :style="view == 1 ? 'display:none' : ''">
                <div class="video-player">
                    <div id="lvb" class="lvb" >
                        <video ref="lvb_video" v-if="lvburl" :src="lvburl"  webkit-playsinline  playsinline  autoplay  muted></video>
                    </div>
                    <div class="game-ready" v-show="view == 2">
                        <div class="ready-text" v-show="catcher.waitNumber * 1">当前排队人数：{{catcher.waitNumber}}</div>
                        <div class="start-game-btn" v-show="!alreadySendQueueRequest" @click="startQueue" @touchstart="pressed.start = true;" @touchend="pressed.start = false;"
                            v-bind:class="{pressed: pressed.start}"></div>
                    </div>
                </div>
            </div>
            <!-- 內容區塊  End  -->
        <!-- 视频流  Start -->
            <div v-show="view == 3" class="container">
                <!-- 視訊通話區域 Start -->
                <div class="main-area">
                    <!-- 主區域 Start -->
                    <div class="panel">
                        <div class="room-num">roomid:{{ roomnum }}</div>
                        <div class="video-panel">
                            <div class='video-container fluid rotate'>
                                <!--<div :class="'video-container p'+video_list.length">-->
                                <div class="flex-item first main-video">
                                    <canvas id="main_camera" rel="main_camera" class="main_camera" width="640" :height="480" workers="true" render="true" webgl="auto"></canvas>
                                    <canvas id="side_camera" rel="main_camera" class="main_camera" style="display: none" width="640" :height="480" workers="true" render="true" webgl="auto"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="control">
                            <!-- <a href="javascript:;" class="ico quitRoom" @click="quitRoom" alt="退出房间"> -->
                        </div>
                    </div>
                    <!-- 主區域  End  -->

                </div>
                <!-- 視訊通話區域  End  -->
            </div>
            <!-- 內容區塊  End  -->

            <div class="game-playing" v-if="view == 3">
                <div class="toggle-box">
                    <div class="toggle-video" @click="toggleView" @touchstart="pressed.togger = true;" @touchend="pressed.togger = false;" v-bind:class="{pressed: pressed.togger}">
                    </div>
                </div>
            <!-- 切换摄像头 End -->
                <div class="flex-box">
                    <!-- 操控 Start -->
                <div class="touch-box" @touchend="touch(Directive.CTL_STOP)">
                    <a class="touch-left"
                        @touchstart="pressed.left = true; touch(Directive.CTL_LEFT_START)"
                        @touchend="pressed.left = false; "
                        v-bind:class="{pressed: pressed.left}"></a>
                    <a class="touch-up"
                        @touchstart="pressed.up = true; touch(Directive.CTL_FORWARD_START)"
                        @touchend="pressed.up = false; "
                        v-bind:class="{pressed: pressed.up}"></a>
                    <a class="touch-right"
                        @touchstart="pressed.right = true; touch(Directive.CTL_RIGHT_START)"
                        @touchend="pressed.right = false; "
                        v-bind:class="{pressed: pressed.right}"></a>
                    <a class="touch-down"
                        @touchstart="pressed.down = true; touch(Directive.CTL_BACKWARD_START)"
                        @touchend="pressed.down = false; "
                        v-bind:class="{ pressed: pressed.down }"></a>
                </div>
                <div class="flex"></div>
                <div class="catcher-box">
                    <div class="time-text" v-text="remainTime"></div>
                    <div class="catcher-btn"
                        @click="catcherDoCatch"
                        @touchstart="pressed.catcher = true;"
                        @touchend="pressed.catcher = false;"
                        v-bind:class="{ pressed: pressed.catcher }"></div>
                    </div>
                </div>
            </div>

            <div class="game-result-box" v-show="showWin || showLose" @click.stop="hideResultPanel">
                <div class="game-result">
                    <div class="game-result-text">
                        <div class="game-win-text" v-show="showWin"></div>
                        <div class="game-lose-text" v-show="showLose"></div>
                    </div>

                </div>
            </div>
        </div>
        <vue-toastr ref="toastr"></vue-toastr>
    </div>
<script src="../libs/store.min.js"></script>
<script src="../libs/lodash.min.js"></script>
<!-- toastr 组件 -->
<script src="../libs/toastr.min.js"></script>
<!-- axios : ajax -->
<script src="../libs/axios.min.js"></script>
<!-- md5 -->
<script src="../libs/md5.min.js"></script>

<script src="https://sqimg.qq.com/expert_qq/wawaji/1.2/TXWawaPlayer.min.js"></script>
<script src="https://sqimg.qq.com/expert_qq/wawaji/1.2/TXWawaVideo.min.js"></script>

<script src="assets/js/mobile.js?v=22"></script>
<script src="../libs/jquery.min.js"></script>
    <script>
        $("#content-box").show();
// 以下方法仅供参考
// 我们提供以下接口方便你根据业务情况
// 来确定是否需要进行特殊的提示
        var isMobile = {
            Windows: function () {
                return /IEMobile/i.test(navigator.userAgent);
            },
            Android: function () {
                return /Android/i.test(navigator.userAgent);
            },
            BlackBerry: function () {
                return /BlackBerry/i.test(navigator.userAgent);
            },
            iOS: function () {
                return /iPhone|iPad|iPod/i.test(navigator.userAgent);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
            }
        };

        if (isMobile.Android()) {
            window.location.href = "../android/index.html"
        }

    </script>

</body>

</html>
